<template>
  <PageCard title="Properties & YML 格式互转">
    <n-spin :show="loading">
      <div class="w-full">
        <!-- Mobile layout: Stack vertically -->
        <div class="converter-layout">
          <!-- YML Section -->
          <div class="converter-section">
            <h3 class="section-title">YML</h3>
            <n-input
              v-model:value="ymlModel"
              type="textarea"
              placeholder="在此输入或粘贴 YML 内容"
              :rows="textareaRows"
              class="code-textarea"
            />
          </div>

          <!-- Action Buttons -->
          <div class="converter-actions">
            <n-space :vertical="isMobile" :size="16" align="center" justify="center">
              <n-tooltip trigger="hover">
                <template #trigger>
                  <n-button 
                    :circle="!isMobile" 
                    strong 
                    secondary 
                    type="primary" 
                    @click="handleYml2Properties"
                    :block="isMobile"
                    size="large"
                  >
                    <template #icon>
                      <n-icon :component="ArrowForward" v-if="!isMobile" />
                      <n-icon :component="ArrowDown" v-else />
                    </template>
                    <span v-if="isMobile" class="ml-2">YML → Properties</span>
                  </n-button>
                </template>
                YML -> Properties
              </n-tooltip>
              <n-tooltip trigger="hover">
                <template #trigger>
                  <n-button 
                    :circle="!isMobile" 
                    strong 
                    secondary 
                    type="primary" 
                    @click="handleProperties2yml"
                    :block="isMobile"
                    size="large"
                  >
                    <template #icon>
                      <n-icon :component="ArrowBack" v-if="!isMobile" />
                      <n-icon :component="ArrowUp" v-else />
                    </template>
                    <span v-if="isMobile" class="ml-2">Properties → YML</span>
                  </n-button>
                </template>
                Properties -> YML
              </n-tooltip>
            </n-space>
          </div>

          <!-- Properties Section -->
          <div class="converter-section">
            <h3 class="section-title">Properties</h3>
            <n-input
              v-model:value="propertiesModel"
              type="textarea"
              placeholder="在此输入或粘贴 Properties 内容"
              :rows="textareaRows"
              class="code-textarea"
            />
          </div>
        </div>
      </div>
    </n-spin>
    <n-divider />
    <UsageGuide
      :title="usageGuideConfig.title"
      :steps="usageGuideConfig.steps"
      :tips="usageGuideConfig.tips"
      :example="usageGuideConfig.example"
    />
  </PageCard>
</template>

<script setup lang="ts">
import {ref, computed} from 'vue';
import {properties2yml, yml2properties} from '@/api/ymlProperties/index.ts';
import {ArrowBack, ArrowForward, ArrowDown, ArrowUp} from '@vicons/ionicons5';
import {NIcon} from 'naive-ui';
import PageCard from "@/components/PageCard.vue";
import UsageGuide from "@/components/UsageGuide.vue";
import { useBreakpoint } from '@/utils/responsive-helper';

const propertiesModel = ref('');
const ymlModel = ref('');
const loading = ref(false);

// Responsive helpers
const { isMobile } = useBreakpoint();
const textareaRows = computed(() => isMobile.value ? 10 : 20);

// UsageGuide configuration
const usageGuideConfig = {
  title: '使用说明',
  steps: [
    '在左侧输入 YML 格式配置或在右侧输入 Properties 格式配置',
    '点击中间的转换按钮进行格式转换',
    '转换结果会自动显示在对应的输入框中'
  ],
  tips: [
    '支持双向转换：YML ↔ Properties',
    '自动处理嵌套结构和数组格式',
    '保留注释内容（如果格式支持）',
    '适用于 Spring Boot 等框架的配置文件转换'
  ],
  example: 'YML: server.port: 8080 ↔ Properties: server.port=8080'
};

const handleYml2Properties = () => {
  if (!ymlModel.value) return;
  loading.value = true;
  yml2properties(ymlModel.value).then(value => {
    propertiesModel.value = value.data;
  }).catch(err => {
    console.error("转换失败:", err);
  }).finally(() => {
    loading.value = false;
  });
};

const handleProperties2yml = () => {
  if (!propertiesModel.value) return;
  loading.value = true;
  properties2yml(propertiesModel.value).then(value => {
    ymlModel.value = value.data;
  }).catch(err => {
    console.error("转换失败:", err);
  }).finally(() => {
    loading.value = false;
  });
};
</script>

<style scoped lang="less">
.converter-container {
  width: 100%;
}

.converter-layout {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
}

.converter-section {
  width: 100%;
}

.section-title {
  margin: 0 0 1rem 0;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--n-text-color);
}

.converter-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}

.code-textarea {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
  font-size: 0.875rem;
}

/* Mobile styles */
@media (max-width: 768px) {
  .converter-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .converter-actions {
    padding: 1rem 0;
    order: 2;
  }

  .converter-section:last-child {
    order: 3;
  }

  .section-title {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
  }

  .code-textarea {
    font-size: 0.75rem;
  }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1024px) {
  .converter-actions {
    padding: 1rem;
  }
}

/* Desktop styles */
@media (min-width: 1025px) {
  .converter-container {
    max-width: 1400px;
    margin: 0 auto;
  }
}

// Improve button hover effects
:deep(.n-button) {
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}
</style>
